<script setup>
import {ref,onMounted} from "vue";
import hospitalapi from '../api'
import { ElMessageBox,ElMessage } from "element-plus";

//绑定数据
const tableData=ref([]);
//控制新增信息窗口是否显示
const addWinVisible=ref(false);
//控制编辑信息窗口是否显示
const editWinVisible=ref(false);
//新增数据绑定对象（双向绑定)
const addObject=ref({});
//编辑数据绑定对象（双向绑定）
const editObject=ref({})
//查询数据文本
const checkObj=ref({
  page:1,
  size:5
});
const total=ref(90);

//记录修改数据的下标
var editIndex=-1
//挂载页面时查询数据
onMounted( function () {
 checkData();
  
});
const checkData=async function(val){
  //相当于点了分页按钮
  if(typeof val=='number'){
    checkObj.value.page=val
  }
  //查询数据
  let result=await hospitalapi.get("/api/bed",checkObj.value)

  //更新表格中的数据
  tableData.value=result.data.list;
  total.value=result.data.count;
  
}



const del=function(index,row){
  ElMessageBox.confirm(
    "确认要删除该行数据吗",
    "提示",{
      confirmButtonText:"确认",
      concelButtonText:"取消",
      type:"warning"
    }
  ).then(async function(){
      //提交数据
      let result=await hospitalapi.del("/api/bed",row.id);
      if(result.code=200){
        //刷新表格数据
        tableData.value.splice(index,1);
        //提示删除成功
        ElMessage({
          type:'success',
          message:'删除成功',
        })
      }else{
        ElMessage({
          type:'info',
          message:result.message
        })
      }

  }) 
   
    
}
//新增数据 addObject 
const addSave=async function(){
  console.log("Sending data:", addObject.value);
  //发送请求
  let result=await hospitalapi.postJson("/api/bed",addObject.value);
  tableData.value.unshift(result.data);
    //表格数据变更
  ElMessage({
    type:'success',
    message:'保存成功',
  });
//提示
  closeaddWin();
}
//保存编辑数据
const editSave=async function(index){
  //发送请求
  let result=await hospitalapi.putJson("/api/bed",editObject.value);
  //刷新表格
  tableData.value[editIndex]=result.data;
  //提示
  ElMessage({
    type:'success',
    message:'保存成功',
  });
  editWinVisible.value=false;
}
//点击编辑按钮执行的方法
const edit=function(index,row){
  //记录修改数据的下标
  editIndex=index;
  //绑定要修改的数据

  editObject.value.wid=row.wid;

  editObject.value.createtime=row.createtime;
  editObject.value.status=row.status;
  editObject.value.bednember=row.bednember;

  //打开对话框
  editWinVisible.value=true;
}



//显示窗口
const openaddWin=()=>{
  addObject.value={};
  addWinVisible.value=true;

}
const closeaddWin=()=>{
  addWinVisible.value=false;
}





</script>


<template>

<el-input v-model="checkObj.wid" style="width: 150px" placeholder="请填入查询的病房编号" />
<el-button type="success" @click="checkData">查询</el-button>
<el-button type="success" @click="addWinVisible=true">新增</el-button>
<el-table
  :data="tableData"
  style="width: 100%"
 >

    <el-table-column prop="wid" label="病房号" width="300" />
   
    <el-table-column prop="createtime" label="创建时间" width="300" />
    <el-table-column prop="bednember" label="床位号" width="300" />
    <el-table-column prop="status" label="状态" width="300" />

<el-table-column label="操作"  width="200" label-class-name="center" >  
    <template #default="scope">
      <div style="display: flex; justify-content: center; align-items: center;">
     <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
     <el-button type="warning" @click="edit(scope.$index,scope.row)">编辑</el-button>
      </div>
    </template>
   </el-table-column>  
</el-table>

  <!-- current-page分页组件初始现实的页码  size：每业的条数 -->
  <el-pagination
  :page-size="checkObj.size"
  :current-page="checkObj.page"
   background layout="prev, pager, next" :total="total" @current-change="checkData"/>



    <!-- start 新增信息的弹出框 -->
  <el-dialog v-model="addWinVisible" title="新增" width="500">
     <el-form :model="addObject">
      
      
   
      <el-form-item label="病房号" label-width="80">
        <el-input v-model="addObject.wid" autocomplete="off" />
      </el-form-item>
     
      <el-form-item label="创建时间" label-width="80">
        <el-date-picker
          v-model="addObject.createtime"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD "
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="床位号" label-width="80">
        <el-input v-model="addObject.bednember" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" label-width="80">
        <el-input v-model="addObject.status" autocomplete="off" />
      </el-form-item>
    

      
    

    </el-form>
      <template #footer>
      <div class="dialog-footer">
        <el-button @click="addWinVisible = false">取消</el-button>
        <el-button type="primary" @click="addSave" >
          保存
        </el-button>
      </div>
          </template>
  </el-dialog>
<!-- end 新增信息的弹出框 -->

<!-- start 编辑信息的弹出框 -->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
     <el-form :model="editObject">
      
      <el-form-item label="病房号" label-width="80">
        <el-input v-model="editObject.wid" autocomplete="off" />
      </el-form-item>
     
      <el-form-item label="创建时间" label-width="80">
        <el-date-picker
          v-model="editObject.createtime"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD "
          :picker-options="pickerOptions"
          readonly>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="床位号" label-width="80">
        <el-input v-model="editObject.bednember" autocomplete="off" />
    </el-form-item>
      <el-form-item label="状态" label-width="80">
        <el-input v-model="editObject.status" autocomplete="off" />
    </el-form-item>
    </el-form>
      <template #footer>
      <div class="dialog-footer">
        <el-button @click="editWinVisible = false">取消</el-button>
        <el-button type="primary" @click="editSave" >
          保存
        </el-button>
      </div>
          </template>
  </el-dialog>
<!-- end 编辑信息的弹出框 -->


</template>

<style scoped>
.center {
  text-align: center;
}

/* 确保按钮宽度一致 */
.el-button {
  width: 80px; /* 根据需要调整按钮宽度 */
  margin: 0 10px; /* 按钮之间的间距 */
}

/* 如果需要，调整操作列的宽度 */
.el-table .el-table__body .center .cell {
  text-align: center;
}
</style>